<template>
	<view class="distriMoney">
		<navBar isBack backColor="#fff" title="分销佣金" color="#fff" background="transparent"></navBar>
		<view class="dm_topImg">
			<image src="https://manager.ryz1620.com/static/distri/makerCenter/bg.png" mode=""></image>
			<!-- 累计佣金 -->
			<view class="dm_nowRatio">
				{{commission}}
				<view class="dm_nowRatioItem">
					<image src="https://manager.ryz1620.com/static/distri/fenxiao/zu.png" mode=""></image>
					累计佣金
				</view>
			</view>
		</view>
		
		
		
		<!-- 日期选择 -->
		<view class="dm_date" :style="'margin-top:'+navHeight+'rpx;'">
			<view class="cell-detail" @click="selectDatePicker">
			    {{date}}
			</view>
			<date-time-picker ref='date-time' endYear="2030" type='year-month' :datestring='dateString' @change='dateTimeChange'></date-time-picker>
			<image @click="selectDatePicker" src="https://manager.ryz1620.com/static/distri/distriMoney/pullBottom.png" mode=""></image>
		</view>
		
		<!-- 用户列表 -->
		<view class="dm_userList">
			<view class="dm_listItem" v-for="(item,index) in moneyList" :key="index">
				<view class="dm_listItemLeft">
					<image :src="item.headimg" mode=""></image>
					<view class="dm_listItemLeft_Info">
						{{item.realname}}
						<span v-if="master==1">{{$moment(item.create_time*1000).format('MM-DD HH:mm')}}</span>
						<span v-else>{{$moment(item.finish_time*1000).format('MM-DD HH:mm')}}</span>
					</view>
				</view>
				<!-- 创业主 -->
				<view class="dm_order" v-if="master==1">
					<view class="dm_listItemRight">
						<view class="dm_listRola1">
							<span>创客主</span>
							+{{item.parent_commission?item.parent_commission:0.00}}元
						</view>
						<view class="dm_listRola2">
							<span>创客精英</span>
							+{{item.commission?item.commission:0.00}}元
						</view>
					</view>
					<view class="dm_lastOrder">
						<view class="dm_lastOrder1">
							<span>订单</span>
							{{item.orders?item.orders:0}}
						</view>
						<view class="dm_lastOrder1">
							<span>客户</span>
							{{item.users?item.users:0}}
						</view>
					</view>
				</view>
				<!-- 创业精英 -->
				<view class="dm_eliteOrder" v-else>
					+{{item.commission}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import navBar from '@/components/navBar/navBar.vue';
	import DateTimePicker from './bory-dateTimePicker/bory-dateTimePicker.vue'
	import service_distri from '@/service/distri.js'
	export default{
		components:{
			navBar,
			DateTimePicker,
		},
		data(){
			return{
				moneyList:[],
				date: new Date().getFullYear()+'年'+(new Date().getMonth()+1)+'月',//初始时间
				page:1,
				year:new Date().getFullYear(),
				mouth:new Date().getMonth()+1,
				master:null,
				commission:null,
				navHeight:200,
			}
		},
		onLoad(options) {
			this.navHeight = 430- Number(this.$store.state.system.navBarHeight)*2;
			this.master = options.master;
			this.commission = options.commission;
			this.getMoneyList()
		},
		methods:{
			
			// 获取分销佣金列表
			getMoneyList(){
				service_distri.getDistriMoney({page:this.page,year:this.year,mouth:this.mouth}).then(res=>{
					console.log(res)
					if(res.code==1){
						this.moneyList = res.data?res.data:[]
					}
				})
			},
			
			//打开时间选择
			selectDatePicker() {
				this.$refs['date-time'].show();
			},
			
			//确定选择时间
			dateTimeChange(value) {
				console.log(value)
				let time = value.split('-')
				this.date = time[0]+'年' +time[1]+'月'
				this.year = Number(time[0])
				this.mouth = Number(time[1])
				this.getMoneyList()
			}
			
		},
	}
</script>

<style lang="scss" scoped>
	.distriMoney{
		padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
		padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/
		.dm_topImg{width: 100%;height: 430rpx;position: absolute;top: 0;left: 0;z-index: 0;image{width: 100%;height: 100%;}}
		// 累计佣金
		.dm_nowRatio{
			width: 100%;
			position: absolute;
			z-index: 2;
			left: 0;
			padding-left: 28rpx;
			bottom: 60rpx;
			// margin: 78rpx 0 0 32rpx;
			font: 500 60rpx/52rpx PingFang SC;
			color: #fff;
			.dm_nowRatioItem{
				margin-top: 20rpx;
				display: flex;
				font: 500 30rpx/40rpx PingFang SC;
				image{
					width: 40rpx;
					height: 40rpx;
					margin-right: 16rpx;
				}
			}
		}
		.dm_date{
			width: 100%;
			height: 98rpx;
			// margin-top: 100rpx;
			background-color: #fff;
			display: flex;
			padding-left: 28rpx;
			align-items: center;
			font: 600 30rpx/40rpx PingFang SC;
			color: #0A0605;
			image{width: 24rpx;height: 24rpx;margin-left: 18rpx;}
			
		}
		// 用户列表
		.dm_userList{
			width: 702rpx;
			background-color: #fff;
			padding: 40rpx 24rpx;
			margin: 40rpx auto 0;
			border-radius: 16rpx;
			.dm_listItem{
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				height: 154rpx;
				// border-bottom: 2rpx solid #F4F4F4;
				border-bottom: 2rpx solid #F4F4F4;
				.dm_listItemLeft{
					display: flex;
					align-items: center;
					image{width: 96rpx;height:96rpx;border-radius: 50%;border: 2rpx solid #EFB82F;margin-right: 24rpx;}
					.dm_listItemLeft_Info{
						display: flex;
						flex-direction: column;
						font: 600 26rpx/40rpx PingFang SC;
						color: #0A0605;
						span{
							margin-top: 12rpx;
							font: 500 22rpx/36rpx PingFang SC;
							color: #A0A0A0;
						}
					}
				}
				// 创业主
				.dm_order{
					display: flex;
					width: 392rpx;
					background: #F8F8F8;
					border-radius: 4rpx;
					justify-content: space-between;
					padding: 16rpx 14rpx;
					.dm_listItemRight{
						width: 226rpx;
						height: 96rpx;
						display: flex;
						// padding-right: 10rpx;
						flex-direction: column;
						justify-content: space-between;
						view{
							display: flex;
							justify-content: space-between;
							font: 600 24rpx/36rpx PingFang SC;
						}
						span{font: 600 20rpx/32rpx PingFang SC;}
						.dm_listRola1{
							color: #FA4E37;
						}
						.dm_listRola2{
							color: #DBA954;
						}
					}
					.dm_lastOrder{
						display: flex;
						border-left:1rpx solid rgba(0,0,0,0.2);
						padding-left: 20rpx;
						flex-direction: column;
						justify-content: space-between;
						.dm_lastOrder1{
							display: flex;
							align-items: center;
							font: 500 22rpx/36rpx PingFang SC;
							color: #0A0605;
							justify-content: space-between;
							span{font: 400 18rpx/32rpx PingFang SC;color: #A0A0A0;margin-right: 10rpx;}
						}
					}
				}
				// 创业精英
				.dm_eliteOrder{
					width: 160rpx;
					height: 88rpx;
					background-color: #F8F8F8;
					border-radius: 4rpx;
					text-align: center;
					font: 550 22rpx/88rpx PingFang SC;
					color: #FA4E37;
				}
			}
		}
	}
</style>
